import React, { Component } from 'react'


import './index.css'


import axios from 'axios'


//引入获取热门城市的函数
// export let reqCityList=(data={})=API.get('/area/city',{data})
import { reqHotCity, reqCityList } from '../../utils/index'


//引入当前城市信息 

import { getCurCity } from '../../utils/city'

// 第一部分  步骤
// 打开 antd-mobile 组件库的 NavBar 导航栏组件 文档。
// 从文档中拷贝组件示例代码到项目中，让其正确运行。
// 修改导航栏样式和结构。


// // 第一步 引入  antd-mobile  
// import { NavBar, Icon,Toast } from 'antd-mobile';





import { Toast } from 'antd-mobile';




// 插件使用



import { AutoSizer, ColumnSizer, List } from 'react-virtualized';



//引入封装好的NavHeader组件 
import  NavHeader from '../../components/NavHeader/NavHeader'



// 索引（A、B等）的高度
const TITLE_HEIGHT = 36
// 每个城市名称的高度
const NAME_HEIGHT = 50

//当前有房源信息的城市的名字
const HOST_CITY = ['北京', '上海', '广州', '深圳']

export default class CityList extends Component {

    constructor(props) {
        super(props)
        this.state = {
            hotCItys: [],
            goodCityNum: [],
            goodCityList: {},
            activeIndex:0 // 高亮显示
        }

           this.list=React.createRef()


    }



    // 生命周期钩子函数
    
    async componentDidMount() {
      await  this.getCityList()  //  区别就是等待 这个getCityList 必须全部走完再去执行后面的代码
    
        // this.getCityList() 

        //初始的情况下  list 或者说左边的内容其实高度是0  获取到内容后 高度就特别高 
        this.list.current.measureAllRows() ////   对于点击索引无法正确定位的问题，调用List组件的 measureAllRows 方法，提前计算高度来解决


    }


    // 获取城市列表 
    async getCityList() {
        //获取热门城市
        var data = await reqHotCity()
        var hotCItys = data.body
        // 获取城市信息

        let res = await axios.get('http://e.ludir.cn:8081/area/city?level=1')
        var { goodCityNum, goodCityList } = formatLetter(res.data.body)
        //组装最后的成型数据

        goodCityList['hot'] = hotCItys
        goodCityNum.unshift('hot')

        //当前城市的位置信息 

        let curData = await getCurCity()
        console.log(curData)

        var curCity = {
            "label": curData
        }


        goodCityList['#'] = [curCity]
        goodCityNum.unshift('#')


        this.setState({
            goodCityNum,
            goodCityList

        })

    }





    rowRenderer = ({
        key, // Unique key within array of rows
        index, // 索引号
        isScrolling, // 当前项是否正在滚动中
        isVisible, // 当前项在 List 中是可见的
        style // 注意：重点属性，一定要给每一个行数据添加该样式！作用：指定每一行的位置
    }) => {
        // console.log(this.state)
        var { goodCityNum, goodCityList } = this.state

        return (

            <div key={key} style={style} className="city">
                {/* formWord(goodCityNum[index]) */}
                <div className="title">{formWord(goodCityNum[index])}</div>
                {goodCityList[goodCityNum[index]].map(item => (
                   
                    <div    onClick={() => this.changeCity(item)}
                        className="name"
                        key={item.value}

                    >
                        {item.label}
                    </div>
                ))}
            </div>


        );
    }

   

    //每一row的高度 =  标题的高度 +  文本内容的高度(每个数组的长度*每一行高度) 
    rowHeight = ({ index }) => {
        var { goodCityNum, goodCityList } = this.state

        console.log(index)

        return TITLE_HEIGHT*1 + goodCityList[goodCityNum[index]].length * NAME_HEIGHT
    }




// 4.7 城市索引列表
// 1. 渲染城市索引列表
// ① 封装 renderCityIndex 方法，用来渲染城市索引列表。
// ② 在方法中，获取到索引数组 goodCityNum ，遍历 goodCityNum ，渲染索引列表。
// ③ 将索引 hot 替换为 热。      {item === 'hot' ? '热' : item}
// ④ 在 state 中添加状态 activeIndex， activeIndex 默认值为0 。 来指定当前高亮的索引。
// ⑤ 在遍历 goodCityNum 时，添加当前字母索引是否高亮的判断条件。  activeIndex === index ? 'index-active' : ''


renderCityIndex=()=>{
    var  {goodCityNum,activeIndex}=this.state
   return(
    goodCityNum.map((item,index)=>{
        return (
            <li className="city-index-item" key={item} 


            onClick={ ()=> this.getCurrentIndex(index)}
            >
           <span   className={activeIndex === index ? 'index-active' : ''}>
          {item === 'hot' ? '热' : item}
        </span>  
            </li>
        )
 
     })
   )


}


// 2. 滚动城市列表让对应索引高亮
// ① 给 List 组件添加 onRowsRendered 配置项，用于获取当前列表渲染的行信息。
// ② 通过参数 startIndex 获取到，起始行索引（也就是城市列表可视区最顶部一行的索引号）。
// ③ 判断 startIndex 和 activeIndex 是否相同（判断的目的是为了提升性能，避免不必要的state 更新）。
// ④ 当 startIndex 和 activeIndex 不同时，更新状态activeIndex 为 startIndex 的值。

RowsRendered=({ overscanStartIndex, overscanStopIndex, startIndex, stopIndex })=>{

    var { activeIndex}=this.state
    // console.log('overscanStartIndex',overscanStartIndex)
    // console.log('overscanStopIndex',overscanStopIndex)
    // console.log('startIndex',startIndex)
    // console.log('stopIndex',stopIndex)

    if(startIndex==activeIndex) {
    //    return 
    }else {
        this.setState({
            activeIndex:startIndex
        })
    }
    // startIndex !=activeIndex? this.setState({activeIndex:startIndex}):''
}

// 4.7 城市索引列表
// 3. 点击索引置顶该索引城市
// ① 给索引列表项绑定点击事件。
// ② 在点击事件中， 通过 index 获取到当前项索引号。
// ③ 调用 List 组件的 scrollToRow 方法，让 List 组件滚动到指定行。
// ④ 设置 List 组件的 scrollToAlignment 配置项值为 start，保证被点击行出现在页面顶部。




getCurrentIndex=(index)=>{
    // alert('xxx')
    console.log('城市索引',index)  // 获取传递过来的索引号
    // 根据右边的索引   来联动 左边的内容 让左边的内容滚动   左右联动(三级联动类似)
    // console.log(this.list.current) // 获取到当前的list 组件  调用scrollToRow 这个方法

    this.list.current.scrollToRow(index)


}



// 4.8 切换城市
// ① 给城市列表项绑定点击事件。
// ② 判断当前城市是否有房源数据（只有北/上/广/深四个城市有数据）。
// ③ 如果有房源数据，则保存当前城市数据到本地缓存中，并返回上一页。
// ④ 如果没有房源数据，则提示用户：该城市暂无房源数据，不执行任何操作。

changeCity=(item)=>{
  console.log('item',item)


    

   var  isHas=  HOST_CITY.includes(item.label)  //includes  es6的写法
   if(isHas) {   

    localStorage.setItem('curCity',item.label)
    localStorage.setItem('id',item.value)
    this.props.history.go(-1)

   }else {
       //如果没有就给提示  
       Toast.info('没有这个城市的房源信息 我们正在统计中....', 2, null, false);
   }

}







    render() {
        // console.log(this.state.goodCityNum, this.state.goodCityList)
        var { goodCityNum, goodCityList } = this.state
        return (
            <div className='NavBox'>
                {/* 我是城市选择组件 */}
                {/* <NavBar className='navBar'
                    onLeftClick={this.navBack} mode="dark"

                    // icon={<Icon type="left" />}
                    icon={<i className='iconfont icon-back'></i>}
                >
                    城市选择---

                </NavBar> */}


               {/* <NavHeader  onLeftClick={()=>{
                //    this.props.history.push('/home')
               }}>   城市选择列表页面</NavHeader> */}
               <NavHeader  title='xxxx' icon={<i className='iconfont icon-tianchongxing-'></i>}>   城市选择列表页面</NavHeader>


                <h2> 长列表渲染   </h2>

                <AutoSizer>
                    {({ height, width }) => (
                        <List
                           ref={this.list}
                            height={height}
                            rowCount={goodCityNum.length}  // 必须关联数组的长度
                            rowHeight={this.rowHeight}
                            rowRenderer={this.rowRenderer}
                            width={width}
                            onRowsRendered={this.RowsRendered}
                            scrollToAlignment={'start'}
                        />
                    )}
                </AutoSizer>

             {/*  右侧 字母排序 内容展示 */}

             <ul className='city-index' >
                 {this.renderCityIndex()}
             </ul>


            </div>
        )
    }
}




// 4.3 获取并处理城市列表数据
// 步骤
// 页面加载时，根据接口获取城市列表数据。
// 分析当前数据格式以及该功能需要的数据格式。
// 转化当前数据格式为所需数据格式。

// 获取热门城市数据，并添加到现有数据列表中（顺序）。  





//4.3.5    获取当前定位城市数据，并添加到现有数据列表中。(优先)  完成 




//4.3.4   获取热门城市数据，并添加到现有数据列表中（顺序）。   实现调用 

// var hotCItys = ''  //热门数据

// var goodCityNum = [] // 城市列表对应的英文字母序号

// var goodCityList = {}   //  城市列表数据处理完成



// //获取热门数据
// async function hotCity() {

//    hotCItys = await reqHotCity()

//     // console.log(hotCItys)
// }
// hotCity()



//4.4.1  reqCityList 获取城市列表 
// rs

// fetch('http://e.ludir.cn:8081/area/city?level=1').then(res=>{
//       return res.json()
// }).then(data=>{
//     console.log('城市列表',data)
// })



// 获取城市列表

// {
//     label: "北京"
//     pinyin: "beijing"
//     short: "bj"
//     value: "AREA|88cff55c-aaa4-e2e0"
// }





// / 接口返回的数据格式：
// [{ "label": "北京", "value": "", "pinyin": "beijing", "short": "bj" }]
// // 渲染城市列表的数据格式为：
// { a: [{}, {}], b: [{}, ...] }
// // 渲染右侧索引的数据格式为：
// ['a', 'b']




// 页面加载时，根据接口获取城市列表数据。
// function  getAreaCity () {

//     // axios.get('http://e.ludir.cn:8081/area/city?level=1').then(res => {
//     //     console.log('城市列表', res.data.body)
//     //     var  {goodCityNum,goodCityList}    =    formatLetter(res.data.body)
//     //     goodCityNum=goodCityNum
//     //     goodCityList=goodCityList



//     // })

//     let res= await   axios.get('http://e.ludir.cn:8081/area/city?level=1')



// }





// axios.get('http://e.ludir.cn:8081/area/city?level=1').then(res => {
//     console.log('城市列表', res.data.body)


//     //  第一步 按照 a-z 排列出来  

//    var  {goodCityNum,goodCityList}    =    formatLetter(res.data.body)

// //    console.log(goodCityNum,goodCityList)

//    goodCityNum=goodCityNum
//    goodCityList=goodCityList

// })









// 分析当前数据格式以及该功能需要的数据格式。
// 转化当前数据格式为所需数据格式。



// 字母转换处理 
function formWord(letter) {

    switch (letter) {
        case '#':
            return '当前城市'

        case 'hot':
            return '热门城市'


        default:
            return letter

    }
}




function formatLetter(arrList) {
    // 这里我们的具体数据处理
    var goodCityList = {}
    var goodCityNum = [];


    arrList.forEach((item, index) => {
        let everyLetter = item.short.substr(0, 1).toUpperCase()  //  B
        // console.log(everyLetter)  //B 



        //  需要去重复  a 或者 b 
        if (goodCityList[everyLetter]) {  // 如果有这个字母
            //    只追加含有这个字母的内容
            // 第二次走这里
            goodCityList[everyLetter].push(item)

        } else { //没有这个字母 我就追加到对象里面去

            //  alert('第一次必须先走')
            // 第一次必须先走
            // goodCityList[everyLetter]=[];


            // goodCityList[everyLetter].push(item)


            goodCityList[everyLetter] = [item]
            // console.log(goodCityList)
        }

    })

    // console.log("goodCityList", goodCityList) 

    goodCityNum = Object.keys(goodCityList).sort()

    //    console.log("goodCityNum",   goodCityNum  )                            

    return {

        goodCityList,
        goodCityNum

    }
}
























